<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../css/mui.min.css">
		<link rel="stylesheet" href="../style/fjol_style.css" />
		<link rel="stylesheet" type="text/css" href="../style/xol_style.css"/>
	</head>

	<body>
		<!--下拉刷新容器-->
		
		<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
			<div class="mui-scroll">
				<!--数据列表-->
				<ul class="mui-table-view" id="houseBrowseList">
					
				</ul>
			</div>
		</div> 
		<script src="../js/mui.min.js"></script>
		<script src="../js/md5.js"></script>
		<script src="../js/common.util.js"></script>
		<script src="../js/network.js"></script>
		<script src="../js/mui.pullToRefresh.js"></script>
		<script src="../js/mui.pullToRefresh.material.js"></script>
		<script src="../js/jquery-2.1.0.js"></script>
		<!--<script src="js/fj_public_js.js"></script>-->
		<script>
			mui.init({
				pullRefresh: {
					container: '#pullrefresh',
					down: {
						callback: pulldownRefresh
					},
					up: {
						contentrefresh: '正在加载...',
						callback: pullupRefresh
					}
				}
			});
			
			var pageValue =1;
		/**
			 * 下拉刷新具体业务实现
			 */
			function pulldownRefresh() {
				
				setTimeout(function(){
					dataLoad(1,10);
					mui('#pullrefresh').pullRefresh().endPulldownToRefresh();
					mui('#pullrefresh').pullRefresh().enablePullupToRefresh();
					return pageValue = 1;
				},1000);
				
			}	
			/**
			 * 上拉加载具体业务实现
			 */
			
			function pullupRefresh() {
				pageValue++;
				setTimeout(function() {
				var userInfo = common.myStorage.getItem('userInfo');
//				console.log(pageValue);
					var param = [{
						key:'clientId',
						value:userInfo.clientId
					},{
						key:'kind',
						value:2
					},{
						key:'page',
						value:pageValue
					},{
						key:'rows',
						value:10
					}];
					fjNetwork.get('fjzx/client/house-browse-list.json',param,function(data){
//					console.log(JSON.stringify(data));
					var rows = data.rows;
					mui('#pullrefresh').pullRefresh().endPullupToRefresh((rows.length==0)); //参数为true代表没有更多数据了。
					var collectHouseList = document.querySelector('#houseBrowseList');
					
					var rows = data.rows;
//					console.log(rows.length);
					
					var keywordCls = [
									'keyword-color1 ',
									'keyword-color2 ',
									'keyword-color3 ',
									'keyword-color4 '
								];
					for (var idx=0; idx<rows.length; idx++) {
						var houseInfo = rows[idx];
						var data = new Array();
						var li = document.createElement('li');	//创建一个li标签
						li.className = 'mui-table-view-cell';	//设置class
						li.setAttribute('id',rows[idx].browseHistoryId);
				        var keywords = rows[idx].keyword;
		                
		                data.push('<a class="flex pr20">');
					data.push('<div class="mui-pull-left mr5" style="border-radius: 4px;width: 100px; height: 75px; overflow: hidden;">');
					if(houseInfo.coverImage){
						data.push('<img class="mui-pull-left mr5" style="width:96px; height:76px;" src="'+houseInfo.coverImage+'">');
					}else{
						data.push('<img class="mui-pull-left mr5" style="width:96px; height:76px;" src="../images/tophone.png">');
					}
					data.push('</div>');
					data.push('<div class="flexcell">');
//					if(_type == 3){
//						data.push('<div>['+houseInfo.leaseTypeName+']'+houseInfo.title+'</div>');
//					}else{
						data.push('<div class="nowrap">'+houseInfo.title+'</div>');
//					}
					
	                data.push('<div class="flex">');
	                data.push('<p class="flexcell" style="width:100%">'+houseInfo.bedRoomNumber+'室'+houseInfo.livingRoomNumber+'厅&nbsp;'+houseInfo.square+'平方</p>');
//	                if(_type == 3){
//	                	data.push('<div class="newRed"><span class="f14" style="font-weight: bold;">'+houseInfo.leasePriceMonth+'</span><span class="f08">元/月</span></div>');
//	                }else{
	                	data.push('<div class="newRed"><span class="f14" style="font-weight: bold;">'+parseInt(houseInfo.totalPrice / 10000)+'</span><span class="f08">元/平</span></div>');
//	                }
	                data.push('</div>');
	                data.push('<p>'+houseInfo.area+' &nbsp;'+houseInfo.buildingName+'</p>');
	                	var keywords = houseInfo.keyword?houseInfo.keyword.replace(' ',''):'';
	                 if(keywords.length>0){
			                	words = keywords.split(',');
			                	for (i in words) {
			                		var j = i%keywordCls.length;
			                		
				                	data.push('<button type="button" class="mui-btn '+keywordCls[j]+' keyword-btn">'+words[i]+'</button>');
				                }
			               }
	                 
	                data.push('</div>');
	                
	                data.push('</a>');
		                
		                
		                	data.push('<span class="color9 mui-pull-right removeBrowse mt10">删除记录</span>');
		                	
		                	li.innerHTML = data.join('');
					collectHouseList.appendChild(li);
					}
					
					mui('#houseBrowseList li').each(function(){
						this.addEventListener('tap',function(){
							
							mui.openWindow({
								url:'../house_detail.html',
								id:'house_detail',
								extras:{
									houseId:this.getAttribute('id')
								}
							})
						});
					});
					
					
					var imgObj = $('#houseBrowseList img');
//					console.log(imgObj.length);
					var RATE = 0.75;	//常量，图片框比例
					imgObj.each(function(){
						$(this).load(function(){
//							console.log($(this).width()+','+$(this).height());
							var rate = parseFloat($(this).height()/$(this).width());
//							console.log(rate);
							if(rate<RATE){		//高度不够
								$(this).css('height','75px');
								$(this).css('width',$(this).height()/rate);
							}else{				//宽度不够
								$(this).css('width','100px');
								$(this).css('height',$(this).width()*rate);
							}
							if($(this).width()>100){
								var marginLeft = parseInt(-($(this).width()-100)*0.5);
								$(this).css('margin-left',marginLeft);
							}
							if($(this).height()>75){
								var marginTop = parseInt(-($(this).height()-75)*0.5);
								$(this).css('margin-top',marginTop);
							}
						});
					});
				
				},function(msg){
					mui.toast(msg);
				});
				
				},1000);
			}
			mui.plusReady(function(){
				
			dataLoad(1,10);
				
			mui('#houseBrowseList').on('tap','.removeBrowse',function(){
				
				var _li = $(this).closest('li');
				var _id = _li.attr('id');
				var clearParam = [{
					key:'ids',
					value:_id
				}]
//				console.log(_id);
				fjNetwork.post('fjzx/client/clear-house-browse.json',clearParam,function(data){
					
					_li.remove();
					mui.toast(data.msg);
					plus.webview.currentWebview().reload();
//					console.log(data.code);
				},function(msg){
					mui.toast(msg);
//					console.log(msg);
				});
				
				
				var e = window.event;
				e.cancelBubble = true;
				if (e.stopPropagation) {
					e.stopPropagation();
				}
			});
				
			});
				function dataLoad(pageValue,rowsNumber){
					var userInfo = common.myStorage.getItem('userInfo');
					var param = [{
						key:'clientId',
						value:userInfo.clientId
					},{
						key:'kind',
						value:2
					},{
						key:'page',
						value:pageValue
					},{
						key:'rows',
						value:rowsNumber
					}];
					fjNetwork.get('fjzx/client/house-browse-list.json',param,function(data){
//					console.log(JSON.stringify(data));
					var collectHouseList = document.querySelector('#houseBrowseList');
					
					var rows = data.rows;
					var data = new Array();
					
					var keywordCls = [
									'keyword-color1 ',
									'keyword-color2 ',
									'keyword-color3 ',
									'keyword-color4 '
								];
					if(rows.length == 0) {
							var _li = document.createElement('li');
							collectHouseList.classList.add('mui-text-center');
							collectHouseList.innerHTML = '<img src="../images/icon_blank.png"/>';
						}else {
							
					for (var idx=0; idx<rows.length; idx++) {
						houseInfo = rows[idx];
						var keywords = rows[idx].keyword;
						data.push('<li class="mui-table-view-cell" id="'+rows[idx].id+'">');
		                
		                data.push('<a class="flex pr20">');
					data.push('<div class="mui-pull-left mr5" style="border-radius: 4px;width: 100px; height: 75px; overflow: hidden;">');
					if(houseInfo.coverImage){
						data.push('<img class="mui-pull-left mr5" style="width:96px; height:76px;" src="'+houseInfo.coverImage+'">');
					}else{
						data.push('<img class="mui-pull-left mr5" style="width:96px; height:76px;" src="../images/tophone.png">');
					}
					data.push('</div>');
					data.push('<div class="flexcell">');
//					if(_type == 3){
//						data.push('<div>['+houseInfo.leaseTypeName+']'+houseInfo.title+'</div>');
//					}else{
						data.push('<div class="nowrap">'+houseInfo.title+'</div>');
//					}
					
	                data.push('<div class="flex">');
	                data.push('<p class="flexcell" style="width:100%">'+houseInfo.bedRoomNumber+'室'+houseInfo.livingRoomNumber+'厅&nbsp;'+houseInfo.square+'平方</p>');
//	                if(_type == 3){
//	                	data.push('<div class="newRed"><span class="f14" style="font-weight: bold;">'+houseInfo.leasePriceMonth+'</span><span class="f08">元/月</span></div>');
//	                }else{
	                	data.push('<div class="newRed"><span class="f14" style="font-weight: bold;">'+parseInt(houseInfo.totalPrice / 10000)+'</span><span class="f08">元/平</span></div>');
//	                }
	                data.push('</div>');
	                data.push('<p>'+houseInfo.area+' &nbsp;'+houseInfo.buildingName+'</p>');
	                	var keywords = houseInfo.keyword?houseInfo.keyword.replace(' ',''):'';
	                 if(keywords.length>0){
			                	words = keywords.split(',');
			                	for (i in words) {
			                		var j = i%keywordCls.length;
				                	data.push('<button type="button" class="mui-btn '+keywordCls[j]+' keyword-btn">'+words[i]+'</button>');
				                }
			               }
	                 
	                data.push('</div>');
	                
	                data.push('</a>');
		                
		                	data.push('<span class="color9 mui-pull-right removeBrowse mt10">删除记录</span>');
		                data.push('</li>');
					}
					
					collectHouseList.innerHTML = data.join('');
					
					}
					mui('#houseBrowseList').on('tap','.mui-table-view-cell a',function(){
						mui.openWindow({
								url:'../house_detail.html',
								id:'house_detail',
								extras:{
									houseId:$(this).closest('li').attr('id')
								}
							})
					});
				
					var imgObj = $('#houseBrowseList img');
//					console.log(imgObj.length);
					var RATE = 0.75;	//常量，图片框比例
					imgObj.each(function(){
						$(this).load(function(){
//							console.log($(this).width()+','+$(this).height());
							var rate = parseFloat($(this).height()/$(this).width());
//							console.log(rate);
							if(rate<RATE){		//高度不够
								$(this).css('height','75px');
								$(this).css('width',$(this).height()/rate);
							}else{				//宽度不够
								$(this).css('width','100px');
								$(this).css('height',$(this).width()*rate);
							}
							if($(this).width()>100){
								var marginLeft = parseInt(-($(this).width()-100)*0.5);
								$(this).css('margin-left',marginLeft);
							}
							if($(this).height()>75){
								var marginTop = parseInt(-($(this).height()-75)*0.5);
								$(this).css('margin-top',marginTop);
							}
						});
					});
				
				},function(msg){
					mui.toast(msg);
				});
				}
			
				
			Date.prototype.toLocaleString = function() {
		        return this.getFullYear() + "-" + (this.getMonth() + 1) + "-" + this.getDate() + " " + this.getHours() + ":" + this.getMinutes() + ":" + this.getSeconds();
		    };
			
		</script>
	</body>

</html>